<style>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
	font-size: 18px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
<template>
  <div class="page-container">
	<!--工具栏-->
	<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
		<el-form :inline="true" :model="filters" :size="size">
			<el-row style="text-align: left;">
				<el-form-item>
				  <!-- <el-input v-model="filters.business" placeholder="商家"></el-input> -->
				    <el-select v-model="filters.type" placeholder="商家" style="width:200px">
					  <el-option label="录屏商家02" value="1">录屏商家02</el-option>
					  <el-option label="育学园-商城" value="1">育学园-商城</el-option>
					  <el-option label="张小二服饰" value="1">张小二服饰</el-option>
					  <el-option label="育学园-商城" value="1">育学园-商城</el-option>
				    </el-select>
				</el-form-item>
				<el-form-item>
				<!-- <el-input v-model="filters.type" placeholder="模板分类"></el-input> -->
				  <el-select v-model="filters.status" placeholder="审核状态" style="width:200px">
					  <el-option label="确认" value="1">确认</el-option>
					  <el-option label="待审核" value="1">待审核</el-option>
					  <el-option label="已审核" value="1">已审核</el-option>
				  </el-select>
				</el-form-item>
				<el-form-item>
				  <el-input v-model="filters.number" placeholder="合同编码"></el-input>
				</el-form-item>
				<el-form-item>
				  <el-input v-model="filters.name" placeholder="模板名称"></el-input>
				</el-form-item>

				<el-form-item>
				   <el-date-picker v-model="filters.startDate" type="date" value-format="yyyy-MM-dd" placeholder="合同生效时间起" style="width:200px"></el-date-picker>
				</el-form-item>
				<el-form-item>
				   <el-date-picker v-model="filters.endDate" type="date" value-format="yyyy-MM-dd" placeholder="合同生效时间止" style="width:200px"></el-date-picker>
				</el-form-item>
				

			</el-row>
			<el-row style="text-align: left;">
				<el-form-item>
				  <el-input v-model="filters.number" placeholder="供应商编码"></el-input>
				</el-form-item>
				<el-form-item>
				  <el-input v-model="filters.number" placeholder="供应商名称"></el-input>
				</el-form-item>
				
				<el-form-item>
				   <el-date-picker v-model="filters.startDate" type="date" value-format="yyyy-MM-dd" placeholder="合同失效时间起" style="width:200px"></el-date-picker>
				</el-form-item>
				<el-form-item>
				   <el-date-picker v-model="filters.endDate" type="date" value-format="yyyy-MM-dd" placeholder="合同失效时间止" style="width:200px"></el-date-picker>
				</el-form-item>
				<el-form-item>
				<!-- <el-input v-model="filters.type" placeholder="模板分类"></el-input> -->
				  <el-select v-model="filters.status" placeholder="合同属性" style="width:200px">
					  <el-option label="统采统付" value="1">统采统付</el-option>
					  <el-option label="分签分付" value="1">分签分付</el-option>
					  <el-option label="自采合同" value="1">自采合同</el-option>
				  </el-select>
				</el-form-item>

			</el-row>
			
			
		</el-form>
	</div>
	<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
		<el-form :inline="true" :size="size">
			<el-form-item>
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
				</el-tooltip>
				<el-tooltip content="导出" placement="top">
					<el-button icon="fa fa-file-excel-o"  @click="downloadExcel" ></el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>
		<!--表格显示列界面-->
		<table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" 
			@handleFilterColumns="handleFilterColumns"> 
		</table-column-filter-dialog>
		
	</div>
	<!--表格内容栏-->
	<kt-table :height="350" :showOperation="false"
		:data="pageResult" :columns="filterColumns"
		@findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
	</kt-table>
	 <!-- <template>
		<el-table :data="tableData"	style="width: 100%">
			<el-table-column prop="number"	label="合同编码" width="180"></el-table-column>
			<el-table-column prop="business" label="商家名称"></el-table-column>
			<el-table-column prop="contractattributes"	label="合同属性"></el-table-column>
			<el-table-column prop="tradingcurrency" label="交易币别"></el-table-column>
			<el-table-column prop="invalid" label="是否失效"></el-table-column>
			<el-table-column prop="suppliernumber" label="供应商编码"></el-table-column>
			<el-table-column prop="suppliername" label="供应商名称"></el-table-column>
			<el-table-column prop="effectivetime" label="合同生效时间"></el-table-column>
			<el-table-column prop="timefailure" label="合同失效时间"></el-table-column>
			<el-table-column prop="type" label="合同变更类型"></el-table-column>
			<el-table-column prop="status" label="履行状态"></el-table-column>
			<el-table-column prop="numbered" label="原合同编号"></el-table-column>
			<el-table-column prop="creator" label="制单人"></el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="handleEdit(scope.row)">确认</el-button>
					<el-button @click="detailed(scope.row)" type="text" size="small">详情</el-button>
					<el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>	
				</template>
            </el-table-column>
		</el-table>
    </template> -->
	<!--新增编辑界面-->
	<el-dialog :title="operation?'新增':'编辑'" width="35%" :visible.sync="dialogVisible" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="60px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right" inline>
			<el-form-item label="ID" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
			</el-form-item>
			
			<el-row>

				<el-form-item label="供应商编码" prop="number">
						<el-input v-model="dataForm.number"  auto-complete="off"></el-input>
				</el-form-item>
	
				<el-form-item label="供应商名称" prop="remark">
					<el-input v-model="dataForm.remark" auto-complete="off"></el-input>
				</el-form-item>
				
			</el-row>
			<el-row style="text-align:center">
				<el-form-item>
					<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>
				</el-form-item>
				
			</el-row>
	<template>
		<el-table :data="tableData" border	style="width: 100%">

			<el-table-column prop="suppliernumber" label="供应商编码"></el-table-column>
			<el-table-column prop="suppliername" label="供应商名称"></el-table-column>
	
		</el-table>
    </template>
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
		</div>
	</el-dialog>

	
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import KtTable from "@/views/Core/KtTable"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
import XLSX from 'xlsx'
import axios from 'axios'
export default {
	components:{
		PopupTreeInput,
		KtTable,
		KtButton,
		TableColumnFilterDialog
	},
	data() {
		return {
			excelup:this.utils.getUpLoadHost(),
			size: 'small',
			document_license:'',
			filters: {
			code:"",
			name:"",
			status:"",
			res:{
				"total": 1,
				"code": "0000",
				"rows": [{
				"code": "OS190922110835123857",
				"name": "拆单规则",
				"priority": 1,
				"status": "可用"
				}]
			 }
            },
			value:0,
            testdata:{},
			imgs:'',
			card:'',
			fileList:{},
			columns: [], 
			tabJson:'',
			warehouselist:[] , 
			filterColumns: [],
			pageRequest: { pageNum: 1, pageSize: 10 },
			pageResult: {},
			dialogImageUrl: '',
			
			operation: false, // true:新增, false:编辑
			dialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			printPage: false,
			dialogVisibleImage:false,
			dataFormRules: {
				number: [
					{ required: true, message: '请输入绑定手机号', trigger: 'blur' }
				],
				type: [
					{ required: true, message: '请输入充值卡金额', trigger: 'blur' }
				],
				bu: [
					{ required: true, message: '请输入充值卡余额', trigger: 'blur' }
				],
				remains: [
					{ required: true, message: '请输入创建时间', trigger: 'blur' }
				],
				template: [
					{ required: true, message: '请输入截止时间', trigger: 'blur' }
				],
				memberid: [
					{ required: true, message: '请输入使用人', trigger: 'blur' }
				],
				status: [
					{ required: true, message: '请输入是否调整', trigger: 'blur' }
				],
				production_time: [
					{ required: true, message: '请选择状态', trigger: 'change' }
				]
				
			},
			dataForm: {
				
			},
			deptData: [],
			deptTreeProps: {
				label: 'name',
				children: 'children'
			},
			roles: [],
			tableData:[
		 {
			number: '20190922150928',
			business:'张小二服饰',
            contractattributes: '自采合同',
			tradingcurrency: 'CNY',
			invalid: '无效',
			suppliernumber: '1911290006883258',
			suppliername: '美元供应商',
			effectivetime: '2019-10-11',
			timefailure: '2019-11-1',
			type: '正常合同',
			status:"暂停",
			numbered: 'HT1910110000055740',
			creator: '13875977921',

          }, {
			number: '20190922150928',
			business:'张小二服饰',
            contractattributes: '自采合同',
			tradingcurrency: 'CNY',
			invalid: '无效',
			suppliernumber: '1911290006883258',
			suppliername: '美元供应商',
			effectivetime: '2019-10-11',
			timefailure: '2019-11-1',
			type: '正常合同',
			status:"暂停",
			numbered: 'HT1910110000055740',
			creator: '13875977921',

          },{
			number: '20190922150928',
			business:'张小二服饰',
            contractattributes: '自采合同',
			tradingcurrency: 'CNY',
			invalid: '无效',
			suppliernumber: '1911290006883258',
			suppliername: '美元供应商',
			effectivetime: '2019-10-11',
			timefailure: '2019-11-1',
			type: '正常合同',
			status:"暂停",
			numbered: 'HT1910110000055740',
			creator: '13875977921',

          }, {
			number: '20190922150928',
			business:'张小二服饰',
            contractattributes: '自采合同',
			tradingcurrency: 'CNY',
			invalid: '无效',
			suppliernumber: '1911290006883258',
			suppliername: '美元供应商',
			effectivetime: '2019-10-11',
			timefailure: '2019-11-1',
			type: '正常合同',
			status:"暂停",
			numbered: 'HT1910110000055740',
			creator: '13875977921',

          },]
		}
	},
	methods: {
	   // 获取分页数据
		findPage: function (data) {
			if(data !== null) {
				this.columns = this.testdata
			}
			this.pageRequest.columnFilters = {
				code: {code:'code', value:this.filters.code}
            }	 
			 
		},
		download (){

		},
		
        //弹窗关闭方法
		handleClose (){
			 this.$refs.dataForm.resetFields()
		},
		detailed (){
			this.$router.push({ path:'/paje/detailed',query:{}})
		},
		// 批量删除
		  handleDelete: function (data) {
//             var ids='';
//             for(var i=0;i<data.params.length;i++){
//                ids=ids+data.params[i].id+',';
//             }
//             data.t='chargeCard'
//             data.ids=ids
//             this.utils.request.deleteUserInfo(data,this.deleteInfoBack)
               this.$message({ message: '操作成功', type: 'success' })
        },
        //删除callback
        deleteInfoBack(data){
	        if(data.code == '0000') {
				this.$message({ message: '操作成功', type: 'success' })
			} else {
				this.$message({message: '操作失败, ', type: 'error'})
			}
             this.findPage();
        },

      //列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => { 
			let filename="库存盘点"
			this.$refs.CyTable.exportData(this.filters,this.filterColumns,filename)
          }).catch(() => {
 
          });
		},
		// 显示新增界面
		handleAdd: function () {
			this.dialogVisible = true
			this.operation = true
			this.dataForm.id="";
			//this.dataForm={};
			if (this.$refs['dataForm']!=undefined) {
				this.$refs['dataForm'].resetFields();
			}
			this.dataForm.document_license="";
		},
		// 打印
		print:function(){
		  this.printPage=true
		  this.operation = true
		},
		reset:function(){
		   this.filters={};
		   this.findPage()
		},
		
		// 显示编辑界面
		handleEdit: function (params) {
			console.log(params)
			this.dialogVisible = true
			this.operation = false
			var this_ = this;
			this.$nextTick(function(){
              this_.dataForm = Object.assign({}, params);
			});
			// var search={};
			// search.id=params.row.id
			// search.t="chargeCard";
			
			// this.utils.request.queryUserInfo(search,function(res){

            //     if(res.code == "0000"){	
			// 		}else{
			// 			this_.$message({message: '获取产品信息异常', type: 'error'});
			// 		}

			// })

		},
		// 编辑
		   submitForm: function () {
            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
// 	                    var this_ = this;
//                         this.editLoading = true
//                         let params = Object.assign({}, this.dataForm)
//                         params.t='chargeCard';
//                         this.utils.request.editUserInfo(params,this.editInfoBack)
						   this.$message({ message: '操作成功', type: 'success' })
						   this.dialogVisible = false
                    })
                }
            })
        },
        // 新增修改回调
        editInfoBack: function (data) {
			if(data.code == '0000') {
				this.$message({ message: '操作成功', type: 'success' })
			} else {
				this.$message({message: '操作失败', type: 'error'})
			}
            this.findPage();
            this.dialogVisible = false
            this.operation = false
            this.editLoading= false
        },
      
		
		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},

		// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      	},
		// 处理表格列过滤显示
      	handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      	},
		// 处理表格列过滤显示
      	initColumns: function () {
			this.columns = [
				//{prop:"id", label:"ID", minWidth:50},
				{prop:"number", label:"模板编号", minWidth:120},
				{prop:"type", label:"合同类型", minWidth:120},
				{prop:"bu", label:"商家", minWidth:120},
				{prop:"remains", label:"版本号", minWidth:120},
				{prop:"name", label:"模板名称", minWidth:120},
				{prop:"template", label:"模板附件", minWidth:120},
				{prop:"username", label:"使用人", minWidth:120},
				{prop:"create_time", label:"创建时间", minWidth:120},
				{prop:"remark", label:"备注", minWidth:120},
				
			]
			this.filterColumns = JSON.parse(JSON.stringify(this.columns)); 
      	},
       
      
	},
	mounted() {
		this.initColumns()
	}
	
	
}
 
		
</script>

<style scoped>
 /deep/ .el-input__inner {
    width: 200px;
}
 .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
 

</style>